<template>
  <div class="app">
    <div class="user"
         @click="$router.push('/home/userHome')">
      <div class="user-txt">
        <span>美好生活</span>
        <span>尽在掌握</span>
        <span class="sp1"><i class="el-icon-school"></i></span>
      </div>
    </div>
    <div class="change user"
         ref="change"
         :style="{opacity: changeOp,transform:tr1}"
         @click="$router.push('/home/change')">
      <div class="user-txt">
        <span>换个寝室</span>
        <span>换种心情</span>
      </div>
    </div>
    <div class="box"
         ref="box"
         :style="{opacity: boxOp}">
      <div class="sp"
           v-for="i in box"
           :key="i.id"
           @click="$router.push(i.path)"
           :style="{backgroundColor:i.bgc,color:i.color}">
        <div><i :class="i.icon"></i></div>
        <div>{{ i.name }}</div>
      </div>
    </div>
    <div class="root"
         ref="root"
         @click="root"
         :style="{opacity: rootOp}">
      <span>管理员入口</span>
    </div>
  </div>
</template>

<script>
import {message, confirm} from "@/utils/age";
import {mapState} from "vuex";

export default {
  data() {
    return {
      tr1:'translateY(50px)',
      tr2:'translateY(50px)',
      tr3:'translateY(50px)',
      changeOp: 0,
      boxOp: 0,
      rootOp: 0,
      changeTop: 0,
      boxTop: 0,
      rootTop: 0,
      content: {
        url1: require('../assets/imag/welcome14.jpg'),
        txt1: '美好生活',
        txt2: '尽在掌握'
      },
      scrollTop: 0,
      clientHeight: 0,
      box: [{
        id: 1,
        name: '寝室公告',
        url: '',
        bgc: '#E4E7ED',
        icon: 'el-icon-coin',
        color: '#94CD1A',
        path: '/home/check',
      }, {
        id: 2,
        name: '物品报修',
        url: '',
        bgc: '#B0B0B0',
        icon: 'el-icon-coin',
        color: '#000000',
        path: '/home/repair',
      }, {
        id: 3,
        name: '生活缴费',
        url: '',
        bgc: '#FFDEB0',
        icon: 'el-icon-coin',
        color: '#3346D9',
        path: '/home/cost',
      }, {
        id: 4,
        name: '物品遗失',
        url: '',
        bgc: '#3B3021',
        icon: 'el-icon-coin',
        color: '#fff',
        path: '/home/lost',
      }],
    };
  },
  components: {},
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    //数据初始化
    this.changeTop = this.$refs.change.offsetTop
    this.boxTop = this.$refs.box.offsetTop
    this.rootTop = this.$refs.root.offsetTop
    window.addEventListener('scroll', this.getScroll);
  },
  methods: {
    root() {
      if (this.user.permissions != null) {
        let rootList = new Array(5)
        for (let i = 0; i < this.user.permissions.length; i++) {
          rootList.push(this.user.permissions[i].per)
        }
        if (rootList.includes('admin')) {
          this.$router.push('/home/root')
        } else {
          message("error", "权限不足！！！")
        }
      } else {
        message("error", "权限不足！！！")
      }
    },
    //  屏幕滚动
    getScroll() {
      this.clientHeight = (document.documentElement.clientHeight) / 1.5
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scrollTop + this.clientHeight >= this.changeTop) {
        this.changeOp = 1
        this.tr1='translateY(0px)'
      }
      if (this.scrollTop + this.clientHeight >= this.boxTop) {
        this.boxOp = 1
        this.tr2='translateY(0px)'
      }
      if (this.scrollTop + this.clientHeight >= this.rootTop) {
        this.rootOp = 1
        this.tr2='translateY(0px)'
      }

    },
  },
  watch: {},
  destroyed() {
    window.removeEventListener('scroll', this.getScroll);
  },
}
</script>

<style scoped>

.root {
  width: 100%;
  height: 100px;
  margin: 10px 0;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  font-size: 20px;
  transition: all 1s;
  background-color: #F3F3F3;
}

/*四个*/
.box {
  display: flex;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
  transition: all 1s;
}

.sp {
  width: 760px;
  height: 500px;
  background-color: pink;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/**/

/*个人信息*/
.user {
  width: 100%;
  height: 650px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #444444;
}

.user-txt {
  font-size: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  /*background-color: pink;*/
  letter-spacing: 10px;
}

.sp1 {
  font-size: 120px;
}

.user-txt span {
  margin: 8px 0;
}

/**/

/*换寝室申请*/
.change {
  margin-top: 10px;
  width: 100%;
  height: 600px;
  cursor: pointer;
  background-color: #606469;
  transition: all 1s;
}

.change span {
  color: #ffffff;
}

/**/

/*图片*/
.image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**/
</style>
